<template>
	<view style="overflow: hidden;">
		<view class="tm">
			条码:
			<input type="text" :disabled="true" v-model="tm">
			<!-- <button @tap="saomiao">扫描</button> -->
		</view>
		<view>
			<view>
				<view style="display: flex;height: 80upx;">
					<view class="ckInfo">
						<text>客户:</text>
						<input type="text" :disabled="true" v-model="kh">
					</view>
					<view class="ckInfo">
						<text style="width: 250upx;">订单号:</text>
						<input type="text" :disabled="true" v-model="ddh">
					</view>
				</view>
			</view>
			<view>
				<view style="display: flex;height: 80upx;">
					<view class="ckInfo">
						<text>货号:</text>
						<input type="text" :disabled="true" v-model="bbreed">
					</view>
					<view class="ckInfo">
						<text style="width: 250upx;">数量:</text>
						<input type="text" :disabled="true" v-model="sl">
					</view>
				</view>
			</view>
			<view style="display: flex;justify-content: space-between;">
				<button class="sure" @tap="saveInfo" :disabled="saveflag">生成发货单</button>
				<button class="sure" style="background-color: #F0301F;" @tap="del">删除</button>
			</view>
		</view>
		<view class="menus">
			<view v-for="(item,index) in menus" :key="item" :class="index == activeindex?'active':''"
				@tap="activeindex = index">{{item}}</view>
		</view>
		<view class="btminfo" v-if="activeindex == 0">
			<t-table style='width: 100%;z-index: 10;'>
				<t-tr>
					<t-td style="flex: 1;">货号</t-td>
					<t-td style="flex: 0 0 120upx;">颜色</t-td>
					<t-td style="flex: 0 0 100upx;">尺码</t-td>
					<t-td style="flex: 0 0 100upx;">数量</t-td>
					<t-td style="flex: 0 0 100upx;">配货数</t-td>
					<!-- <t-td>订单号</t-td> -->
				</t-tr>
				<t-tr v-for="(item,index) in arr" :key="index">
					<t-td style="flex: 1;word-break: break-word;">{{item.bbreed}}</t-td>
					<t-td style="flex: 0 0 120upx;word-break: break-word;">{{item.color}}</t-td>
					<t-td style="flex: 0 0 100upx;word-break: break-word;">{{item.chima}}</t-td>
					<t-td style="flex: 0 0 100upx;word-break: break-word;">{{item.wphsl}}</t-td>
					<t-td style="flex: 0 0 100upx;word-break: break-word;">
						<!-- <input type="digit" v-model="item.sl"> -->
						{{!!item.sl?item.sl:0}}
					</t-td>
					<!-- <t-td style="flex: 1;word-break: break-word;">{{item.ddh}}</t-td> -->
				</t-tr>
			</t-table>
		</view>

		<view class="btminfo" v-if="activeindex == 1">
			<t-table style='width: 100%;z-index: 10;'>
				<t-tr>
					<t-td style="flex: 0 0 70upx;">
						<checkbox-group @change="check = !check">
							<label class="uni-list-cell uni-list-cell-pd">
								<view>
									<checkbox :value="check" :checked="check" />
								</view>
							</label>
						</checkbox-group>
					</t-td>
					<t-td style="flex: 1;">货号</t-td>
					<t-td style="flex: 0 0 100upx;">颜色</t-td>
					<t-td style="flex: 0 0 70upx;">尺码</t-td>
					<t-td style="flex: 0 0 100upx;">数量</t-td>
					<t-td style="flex: 0 0 100upx;">条码</t-td>
				</t-tr>
				<t-tr v-for="(item,index) in hzData" :key="index">
					<t-td style="flex: 0 0 70upx;word-break: break-word">
						<checkbox-group @change="changeBox($event,item)">
							<label class="uni-list-cell uni-list-cell-pd">
								<view>
									<checkbox :value="item.check" :checked="item.check" />
								</view>
							</label>
						</checkbox-group>
					</t-td>
					<t-td style="flex: 1;word-break: break-word;">{{item.bbreed}}</t-td>
					<t-td style="flex: 0 0 100upx;word-break: break-word;">{{item.color}}</t-td>
					<t-td style="flex: 0 0 70upx;word-break: break-word;">{{item.chima}}</t-td>
					<!-- <t-td style="flex: 0 0 70upx;word-break: break-word;">{{item.wphsl}}</t-td> -->
					<t-td style="flex: 0 0 100upx;word-break: break-word;">
						<!-- <input type="digit" v-model="item.sl" @blur="changeSl(item)"> -->
						{{!!item.sl?item.sl:0}}
					</t-td>
					<t-td style="flex: 0 0 100upx;;word-break: break-word;">{{item.barcode}}</t-td>
				</t-tr>
			</t-table>
		</view>
		<view style="text-align: center;color: #f0301f;font-size: 40upx;border-top: 1px solid #ccc;">
			已扫描{{hzData.length}}个条码
		</view>
		<!-- <view>
			<button type="default" style="height: 80upx;
		line-height: 80upx;
		color: #FFFFFF;
		background-color: #4ec7eb;
		width: 98%;"  @tap="saveInfo">生成发货单</button>
		</view> -->
		<scanCode></scanCode>
	</view>
</template>


<script>
	import scanCode from '@/static/scan-code/scan-code.vue';
	// import Voice from '@/static/voice.js'; //语音文件
	import axios from '@/static/axios.js';
	import tTable from '@/static/t-table/t-table.vue'
	import tTh from '@/static/t-table/t-th.vue'
	import tTr from '@/static/t-table/t-tr.vue'
	import seach from '@/static/mSeach/mSeach.vue'
	import tTd from '@/static/t-table/t-td.vue'
	const TTSSpeech = uni.requireNativePlugin("MT-TTS-Speech");
	export default {
		components: {
			scanCode,
			tTable,
			tTh,
			tTr,
			tTd,
			seach
		},
		data() {
			return {
				tm: '',
				num: 0,
				arr: [],
				sl: '',
				color: '',
				chima: '',
				bbreed: '',
				url: '',
				pinpai: '',
				kh: '',
				uid: '',
				check: false,
				ddh: '',
				khid: '',
				menus: ['订单信息', '配货信息'],
				activeindex: 0,
				hzData: [],
				barcodeArr: [],
				menu: '',
				requestFlag: false,
				saveflag: false,
				uuid: ''
			}
		},
		onLoad(r) {
			this.url = uni.getStorageSync('url') == '' ? this.websiteUrl : uni.getStorageSync('url')
			this.uid = uni.getStorageSync('id')
			this.uuid = this.guid()
			TTSSpeech.init((status) => {
				if (status === 0) {
					// console.log('引擎初始化成功')
				}
			}, 'com.iflytek.speechcloud')
			var _this = this
			uni.$off('scancodedate')
			uni.$on('scancodedate', function(content) {
				console.log(content);
				if (content.indexOf('-') == -1 && _this.arr.length == 0) {
					uni.showToast({
						title: '请先扫描配货单',
						icon: 'none',
						duration: 3000
					})
					// Voice('请先扫描销售订单', true)
					TTSSpeech.speak({
						text: '请先扫描配货单'
					})
					return
				} else if (content.indexOf('-') != -1) { 
					_this.getDd(content)
				} else{
					_this.getcpBarcode(content)
				}
			})
		},
		watch: {
			check(val) {
				console.log(val)
				if (!!val) {
					this.arr.forEach(val => {
						val.check = true
					})
				} else {
					this.arr.forEach(val => {
						val.check = false
					})
				}
			}
		},
		methods: {
			// guid() {
			// 	return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
			// 		var r = Math.random() * 16 | 0,
			// 			v = c == 'x' ? r : (r & 0x3 | 0x8);
			// 		return v.toString(16);
			// 	});
			// },
			changeSl(item) {
				console.log(item.sl, item.editsl)
				if (item.sl * 1 > item.editsl * 1) {
					uni.showToast({
						title: `数量不能大于${item.editsl}`,
						icon: 'none',
						duration: 2000
					})
					item.sl = item.editsl
				} else {
					this.calc()
				}
			},
			calc() {
				this.arr.forEach(item => {
					item.sl = 0
				})
				this.hzData.forEach(val => {
					var findex = this.arr.findIndex(item => val.bbreed == item.bbreed && val.chima == item.chima &&
						val.color == item.color)
					// console.log(findex)
					if (findex >= 0) {
						this.arr[findex].sl += val.sl * 1
						// if (this.arr[findex].sl * 1 != this.arr[findex].wphsl * 1) {
						// 	if (this.arr[findex].sl * 1 + val.sl * 1 < this.arr[findex].wphsl * 1) {
						// 		this.arr[findex].sl += val.sl * 1
						// 		console.log(this.arr[findex].sl, val.sl, 'sl')
						// 	} else {
						// 		this.arr[findex].sl += this.arr[findex].wphsl * 1 - this.arr[findex].sl * 1
						// 		val.sl = this.arr[findex].wphsl * 1 - this.arr[findex].sl * 1
						// 		val.editsl = this.arr[findex].wphsl * 1 - this.arr[findex].sl * 1
						// 	}
						// }

					}
				})
			},
			getcpBarcode(content) {

				if (!!this.requestFlag) return
				this.requestFlag = true
				// console.log(JSON.stringify(this.arr),content)
				console.log(this.hzData);
				console.log(this.barcodeArr);
				// return
				if (this.barcodeArr.some(item=> item == content)) {
					TTSSpeech.speak({
						text: '此条码已扫描'
					})
					uni.showToast({
						title: '此条码已扫描',
						icon: 'none',
						duration: 3000
					})
					this.requestFlag = false
					return
				}
				// let data = {
				// 	data: JSON.stringify(this.arr),
				// 	barcode: content
				// }
				// console.log(data);
				uni.request({
					url: `http://${this.url}/bService.asmx/Order_ph_check`,
					method: 'POST',
					dataType: 'json',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						data: JSON.stringify(this.arr),
						barcode: content
					},
					success: (r) => {
						console.log(r)
						this.requestFlag = false
						if (r.data.code == 200) {
							if (!!r.data.data && r.data.data.length > 0) {
								// this.hzData = []
								var findex = this.arr.findIndex(item => r.data.data[0].bbreed == item.bbreed &&
									r.data.data[0].chima == item.chima && r.data.data[0].color == item
									.color)
								// console.log(findex, 'findex')
								if (findex >= 0) {
									var newSl = r.data.data.reduce((pre,cur)=>{
										return pre + parseInt(cur.sl)
									},0)
									// console.log(newSl);
									if (this.arr[findex].sl * 1 < this.arr[findex].wphsl * 1) {
										// console.log(this.arr[findex].sl * 1 + r.data.data[0].sl * 1, this.arr[
										// 	findex].wphsl * 1)
										// if (this.arr[findex].sl * 1 + newSl * 1 > this.arr[findex]
										// 	.wphsl * 1) {
										// 	r.data.data[0].sl = this.arr[findex].sl * 1 - this.arr[findex]
										// 		.wphsl * 1

										// 	this.arr[findex].sl += this.arr[findex].wphsl * 1 - this.arr[
										// 		findex].sl * 1
										// 		r.data.data.forEach(item=>this.barcodeArr.push(item.barcode))
										// 	// this.barcodeArr.push(r.data.data[0].barcode)
										// 	this.hzData = this.hzData.concat(r.data.data)
										// 	this.hzData.forEach(val => {
										// 		val.check = false
										// 		val.editsl = val.sl
										// 	}) 
										// } else {
											this.arr[findex].sl += newSl * 1
											this.barcodeArr.push(r.data.data[0].bbbarcode)
											this.hzData = this.hzData.concat(r.data.data)
											this.hzData.forEach(val => {
												val.check = false
												val.editsl = val.sl
											})

										// }

									}

								} 
							} 
						} else {
							uni.showToast({
								title: r.data.msg,
								icon: 'none',
								duration: 3000
							})
							TTSSpeech.speak({
								text: r.data.msg
							})
						}
					},
					complete: () => {
						this.requestFlag = false
					}
				})
			},
			getDd(content) {
				let _this = this
				uni.request({
					url: `http://${_this.url}/bService.asmx/Pro_get_order_dd`,
					method: 'GET',
					dataType: 'json',
					data: {
						dh: content
					},
					success: (r) => {
						console.log(r);
						_this.tm = content

						if (r.data.code == 200) {
							if (!!r.data.data && r.data.data.length > 0) {
								// if (JSON.stringify(_this.arr).indexOf('"' + 'dh' + '":' + '"' + r.data.data[0]
								// 		.dh + '"') != -1) {
								// 	TTSSpeech.speak({
								// 		text: '此p已扫描'
								// 	})
								// 	uni.showToast({
								// 		title: '此订单已扫描',
								// 		icon: 'none',
								// 		duration: 3000
								// 	})
								// 	return
								// }
								_this.hzData = []
								_this.barcodeArr = []
								_this.kh = r.data.data[0].khname
								_this.khid = r.data.data[0].khid
								_this.bbreed = r.data.data[0].bbreed
								_this.ddh = r.data.data[0].ddh
								_this.arr = r.data.data
								let sl = 0
								_this.arr.forEach(val => {
									sl += (val.wphsl * 1)
									val.sl = 0
									val.check = false
								})
								_this.sl = sl  
								_this.$forceUpdate()
							}

						} else {
							uni.showToast({
								title: r.data.msg,
								icon: 'none',
								duration: 3000
							})
							TTSSpeech.speak({
								text: r.data.msg
							})
						}


					},
					complete: (r) => {
						if (r.statusCode != 200) {
							uni.showToast({
								title: '网络请求失败!',
								icon: 'none',
								duration: 3000
							})
						}
					}
				})
			},
			guid() {
				return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
					var r = Math.random() * 16 | 0,
						v = c == 'x' ? r : (r & 0x3 | 0x8);
					return v.toString(16);
				});
			},
			changeBox(e, item) {
				console.log(e, item)
				item.check = !item.check
			},
			del() {
				let delArr = []
				this.hzData.filter(val => {
					if(val.check){
						delArr.push(val.bbbarcode)
					}
				})
				console.log(delArr);
				console.log(this.hzData);
				if (delArr.length == 0) {
					uni.showToast({
						title: '请选择需要删除的数据',
						icon: 'none',
						duration: 3000
					})
					return
				}
				uni.showModal({
					title: '提示',
					content: '是否确定删除',
					success: (r) => {
						if (r.confirm) {
							let data = []
							
							data = this.hzData = this.hzData.filter(item=>!delArr.includes(item.bbbarcode))
							this.barcodeArr = this.barcodeArr.filter((item=>!delArr.includes(item)))
							
							// this.hzData = this.hzData.forEach(item=>item.check = false)
							// console.log(this.hzData);
							// data.forEach(val => {
							// 	if (JSON.stringify(this.barcodeArr).indexOf(val.barcode) != -1) {
							// 		this.barcodeArr.push(val.barcode)
							// 	}
							// })
							this.hzData = []
							setTimeout(() => {
								this.hzData = data
								 
								this.check = false
								this.calc()
							}, 300)

						}
					}
				})
			},
			saveInfo() {

				this.saveflag = true

				if (this.arr.length == 0 || this.hzData.length == 0) {
					uni.showToast({
						title: '没有数据无法保存!',
						icon: 'none',
						duration: 3000
					})
					this.saveflag = false
					return
				}
				let data ={
					dddata: JSON.stringify(this.arr),
					hzdata: JSON.stringify(this.hzData),
					khid: this.khid,
					uid: this.uid,
					uuid: this.uuid
				}
				console.log(data);
				// return
				uni.request({
					url: `http://${this.url}/bService.asmx/Creat_Order_fhd_new`,
					method: 'POST',
					dataType: 'json',
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					data: {
						dddata: JSON.stringify(this.arr),
						hzdata: JSON.stringify(this.hzData),
						khid: this.khid,
						uid: this.uid,
						uuid: this.uuid
					},
					success: (r) => {
						if (r.statusCode == 200) {
							let temp = r.data.split(',')
							if (temp[0] == '1') {
								uni.showToast({
									title: '生成失败',
									icon: 'none',
									duration: 3000
								})
								// Voice('生成单据失败', true)
								TTSSpeech.speak({
									text: '生成失败'
								})
							} else {
								this.bbreed = ""
								this.color = ""
								this.chima = ""
								this.sl = ""
								this.barcode = ''
								this.pinpai = ''
								this.tm = ''
								this.arr = []
								this.kh = ''
								this.ddh = ''
								this.tm = ''
								this.hzData = []
								this.barcodeArr = []
								uni.showToast({
									title: '生成成功',
									icon: 'none',
									duration: 3000
								})
								// Voice('生成单据成功', true)
								TTSSpeech.speak({
									text: '生成成功'
								}) 
								this.uuid = this.guid()

							}
						}
					},
					complete: (r) => {
						console.log(r, 'sss')
						this.saveflag = false
						if (r.statusCode != 200) {
							uni.showToast({
								title: '网络请求失败!',
								icon: 'none',
								duration: 3000
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
	.tm {
		height: 8vh;
		padding: 0 10upx;
		display: flex;
		align-items: center;
		width: 100%;
		font-size: 40upx;
	}

	.tm input {
		border: 1px solid #ccc;
		border-radius: 6upx;
		width: 81%;
		margin-left: 18upx;
	}

	.tm button {
		height: 60upx;
		line-height: 60upx;
		background-color: #4ec7eb;
		color: #FFFFFF;
		width: 21%;
	}

	.btminfo {
		height: calc(100vh - 480upx);
		overflow-y: auto;
	}

	.ckInfo {
		display: flex;
		align-items: center;
		padding: 0 10upx;
		width: 50%;
	}

	.ckInfo text {
		display: inline-block;
		width: 200upx;
	}

	.ckInfo input {
		border: 1px solid #CCCCCC;
		border-radius: 6upx;
	}

	.sure {
		height: 80upx;
		line-height: 80upx;
		color: #FFFFFF;
		background-color: #4ec7eb;
		width: 48%;
	}

	uni-forms-item {
		width: 100%;
	}

	.menus {
		height: 90upx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.menus>view {
		width: 30%;
		height: 70upx;
		border: 1px solid #ccc;
		line-height: 70upx;
		text-align: center;
	}

	.menus>view:last-child {
		border-left: none;
	}

	.active {
		background: #4ec7eb;
		color: #fff;
	}
</style>